<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card bg-purple">
          <div class="icon-wrapper">
            <i class="el-icon-s-data"></i>
          </div>
          <div class="content">
            <span class="title">总订单数</span>
            <count-to :start-val="0" :end-val="orderCount" :duration="2600" class="count"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card bg-blue">
          <div class="icon-wrapper">
            <i class="el-icon-box"></i>
          </div>
          <div class="content">
            <span class="title">货架仓位数</span>
            <count-to :start-val="0" :end-val="positionCount" :duration="3000" class="count"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="stat-card bg-green">
          <div class="icon-wrapper">
            <i class="el-icon-success"></i>
          </div>
          <div class="content">
            <span class="title">非滞留件</span>
            <count-to :start-val="0" :end-val="retionCount" :duration="3200"  class="count"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主图表区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span class="chart-title">销售订单走势图</span>
          </div>
          <div ref="outputTrendChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部双图表 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span class="chart-title">单件/组合件/滞留件</span>
          </div>
          <div ref="defermentFactorChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="clearfix">
            <span class="chart-title">包裹超材率</span>
          </div>
          <div ref="qualificationRateChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import CountTo from 'vue-count-to';
import {listInfo} from "@/api/system/info";
import {listPosition} from "@/api/system/position";
import {listRetion} from "@/api/system/retion";

// ECharts主题
const chartTheme = {
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'],
  textStyle: {
    fontFamily: 'Arial, sans-serif'
  }
};

export default {
  components: { CountTo },
  data(){
    return{
      orderCount: 0,
      positionCount: 0,
      retionCount:0
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    getList() {
      listInfo().then(response => {
        this.orderCount = response.total;
      });

      listPosition().then(response => {
        this.positionCount = response.total;
      });
      listRetion().then(response => {

        // this.retionCount = response.total;

        this.retionCount = response.rows.filter(item => item.handleStatus === 2).length;

      });


    },

    initCharts() {
      this.initOutputTrend();
      this.initDefermentChart();
      this.initQualificationChart();
    },
    initOutputTrend() {
      const chart = echarts.init(this.$refs.outputTrendChart, null, {
        renderer: 'canvas'
      });
      chart.setOption({
        ...chartTheme,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [{
          data: [0, 0, 0, 0, 12, 33],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(84,112,198,0.5)' },
              { offset: 1, color: 'rgba(84,112,198,0.1)' }
            ])
          },
          lineStyle: {
            width: 3
          },
          symbolSize: 8
        }],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderWidth: 0,
          padding: [8, 16],
          textStyle: {
            color: '#333'
          }
        }
      });
      this.outputChart = chart;
    },
    initDefermentChart() {
      const chart = echarts.init(this.$refs.defermentFactorChart);
      chart.setOption({
        ...chartTheme,
        series: [{
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '55%'],
          label: {
            formatter: '{b}\n{d}%',
            fontSize: 14
          },
          data: [
            { value: 120, name: '单件' },
            { value: 380, name: '组合件' },
            { value: 12, name: '滞留件' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
      this.defermentChart = chart;
    },
    initQualificationChart() {
      const chart = echarts.init(this.$refs.qualificationRateChart);
      chart.setOption({
        ...chartTheme,
        series: [{
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '55%'],
          label: {
            formatter: '{b}\n{d}%',
            fontSize: 14
          },
          data: [
            { value: 800, name: '合格' },
            { value: 20, name: '超材' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });
      this.qualificationChart = chart;
    },
    handleResize() {
      [this.outputChart, this.defermentChart, this.qualificationChart].forEach(chart => {
        chart && chart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 50px);
}

.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  transition: transform .3s;

  &:hover {
    transform: translateY(-3px);
  }

  .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .content {
    margin-left: 20px;

    .title {
      font-size: 14px;
      display: block;
      margin-bottom: 8px;
      color: aliceblue;
    }

    .count {
      font-size: 24px;
      font-weight: bold;
    }
  }
}

.bg-purple { background: #7e5fd9; }
.bg-blue { background: #5470c6; }
.bg-green { background: #67c23a; }

.chart-card {
  border-radius: 8px;
  ::v-deep .el-card__header {
    border-bottom: none;
    padding: 16px 20px;
  }
  .chart-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .chart-container {
    height: 400px;
  }
}
</style>
